<template>
	<div id="app1">
		<el-container  class="mainBox">
			<el-header class="main-header" style="height: 60px">
				<!-- 导航 -->
				<nav class="navbar navbar-static-top">
					<!-- Logo -->
					<a href="all-admin-index.html" class="logo" style="text-align: center">
						<span class="logo-lg" v-show="!isCollapse"><img src="../assets/images/logo1.png" width="180px" height="60px" /></span>
					</a>
					<div class="right-menu">
						<!-- 通知 -->
						<div class="notice">
							<!-- el-popover 弹出框 -->
							<el-popover placement="bottom" width="400" trigger="hover">
								<!-- 弹框内容 -->
								<div>
									<h1>测试</h1>
								</div>
								<!-- slot="reference" 必须要指定谁触发弹出框 -->
								<el-badge :value="12" class="item" slot="reference">
									<img src="../assets/img/u1377.png" />
								</el-badge>
							</el-popover>
						</div>
						<!-- 分隔 -->
						<el-divider direction="vertical"></el-divider>
						<!-- 头像 -->
						<el-dropdown class="avatar-container right-menu-item" trigger="click" @command="handleCommand">
							<div class="avatar-wrapper">
								<img src="../assets/img/user2-160x160.jpg" class="user-avatar" />
								{{ this.userInfo.realName }}
							</div>
							<el-dropdown-menu slot="dropdown" style="top: 30px; left: 1278px; width: 120px">
								<el-dropdown-item icon="el-icon-s-custom" command="userCenter">
									<span>个人中心</span>
								</el-dropdown-item>
								<el-dropdown-item icon="el-icon-circle-check" command="logout">
									<span>退出</span>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
					<!-- 顶部导航 -->
					<div class="topbar-title">
						<!-- :default-active 默认选中 -->
						<el-row>
							<el-col :span="24">
								<el-menu class="el-menu-demo headNav" mode="horizontal" :default-active="defaultActiveIndex">
									<el-menu-item :index="item.path" v-for="(item, i) in menuList" @click="handleSelect(item)" :key="i">
										<i class="iconNav" :class="item.icon"></i>
										{{ item.name }}
									</el-menu-item>
								</el-menu>
							</el-col>
						</el-row>
					</div>
					<!-- end -->
				</nav>
				<!-- end -->
			</el-header>
			<el-container>
				<!-- 左侧菜单 -->
				<!-- default-active默认选中
                collapse是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）
                default-openeds  默认当前打开的 sub-menu 的 index 的数组
                :router="true" 启动路由index访问路径-->
				<el-aside width="180px" class="asieHeight">
					<el-menu :default-active="defaultActive" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" :default-openeds="openeds" :router="true">
						<!-- <sidebar-item
              :key="data.path"
              v-for="data in data.children"
              :item="data"
            /> -->
						<div v-for="item in data.children" :key="item.path">
							<div v-if="item.children">
								<template v-if="item.children.length == 0">
									<el-menu-item :index="item.path" @click="saveNavState('/' + item.path)">
										<i class="icon" :class="item.icon"></i>
										<a target="right">{{ item.name }}</a>
									</el-menu-item>
								</template>
								<template v-else :index="item.path">
									<div slot="title" class="el-submenu__title">
										<i class="icon" :class="item.icon"></i>
										{{ item.name }}
									</div>

									<template v-for="child in item.children">
										<sidebar-item v-if="child.children && child.children.length > 0" :item="child" :key="child.path" />
										<el-menu-item v-else :key="child.peath" :index="'/' + child.path" style="padding-left: 58px" @click="saveNavState('/' + child.path)">
											<a target="right">{{ child.name }}</a>
										</el-menu-item>
									</template>
								</template>
							</div>
						</div>
					</el-menu>
				</el-aside>
				<!-- end -->
				<!-- iframe导入对应的模块内容 -->
				<el-container>
					<!-- 路由占位符 -->
					<router-view></router-view>
					<!-- <iframe name="right" id="iframepage" :src="linkUrl" style="width:100%;magrin:0 auto" marginwidth="0" marginheight="0" height="100%" frameborder="0" ranat="server"></iframe> -->
					<!-- <iframe  name="mainFrame" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no" src="commodity-add.html" style="width:100%;magrin:0 auto"></iframe> -->
				</el-container>
				<!--  -->
			</el-container>

			<!-- 底部 -->
			<el-footer>
				<footer class="main-footer">
					<div class="pull-right hidden-xs">
						<b>Version</b>
						1.0
					</div>
					<strong>
						Copyright &copy; 2016-2019
						<a href="http://www.itcast.cn">研究院研发部</a>
						.
					</strong>
					All rights reserved.
				</footer>
			</el-footer>
		</el-container>

		<!-- end -->
	</div>
</template>

<script>
import Vue from 'vue'
// 左侧菜单组件
Vue.component('sidebar-item', {
	props: {
		item: {
			type: Object,
			required: true
		}
	},
	template: `
        <div v-if="item.children">
            <template v-if="item.children.length == 0">
                <el-menu-item :index="item.path" @click="saveNavState('/' + item.path)">
                <i class="icon" :class="item.icon"></i>
                <a  target="right">{{item.name}}</a>
                </el-menu-item>
            </template>
            <template v-else :index="item.path">
                <div slot="title" class="el-submenu__title">
                    <i class="icon" :class="item.icon"></i>
                    {{item.name}}
                </div>

                <template v-for="child in item.children">
                    <sidebar-item
                    v-if="child.children&&child.children.length>0"
                    :item="child"
                    :key="child.path"/>
                    <el-menu-item v-else :key="child.peath" :index="'/'+child.path" style='padding-left:58px'  @click="saveNavState('/' + item.path)">
                    <a  target="right">{{child.name}}</a>
                    </el-menu-item>
                </template>
            </template>
        </div>`
})

// window.onload = windowHeight; //页面载入完毕执行函数
// function windowHeight() {
//     var wd = 220;
//     var iframepage=document.getElementById("iframepage")
//     var asieHeight=document.getElementById("asieHeight")
//     iframepage.style.width=document.documentElement.clientWidth-wd + 'px'
//     asieHeight.style.height=document.documentElement.clientHeight + 'px'
// }

export default {
	data() {
		return {
			//菜单折叠
			isCollapse: false,
			//选择顶部导航菜单，联动左侧菜单的列表数据
			data: [],
			//菜单列表
			menuList: [],
			//顶部导航选中的菜单
			defaultActiveIndex: '',
			//左侧导航默认选中菜单
			defaultActive: '',
			//默认当前打开的 sub-menu 的 index 的数组
			openeds: [],
			//当前项目应用code
			appCode: 'esjy',
			//获取当前的用户
			userInfo: {}
		}
	},

	created() {
		//获取当前用户  parse()json字符串转对象
		this.userInfo = JSON.parse(window.sessionStorage.getItem('user'))
		//顶部导航激活的菜单
		this.defaultActiveIndex = localStorage.getItem('activeIndex')
		// console.log(menu.data)
		//左侧菜单激活的选项
		this.defaultActive = localStorage.getItem('activePath')
		//获取菜单列表
		this.getMenuList()
	},

	methods: {
		//获取菜单列表
		async getMenuList() {
			const { data: res } = await this.$http.get('api/global/getUserMenu', {
				params: {
					access_token: this.userInfo.accessToken,
					appCode: this.appCode
				}
			})
			//赋值给菜单列表
			this.menuList = res.data
			//   console.log(this.menuList)
			this.menuList.forEach(menu => {
				if(menu.path===this.defaultActiveIndex){
					this.data =menu
				} 
			});
			let data = []
			for (let i = 0; i < this.data.children.length; i++) {
				data.push(this.data.children[i].path)
			}
			//默认当前打开的 sub-menu 的 index 的数组
			this.openeds = data
		},

		//左侧导航链接的激活状态
		saveNavState(activePath) {
			localStorage.setItem('activePath', activePath)
			this.defaultActive = activePath
		},

		handleOpen(key, keyPath) {
			console.log(key, keyPath)
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath)
		},
		// 选择顶部导航菜单，联动左侧菜单
		handleSelect(key) {
			//顶部导航激活的菜单
			localStorage.setItem('activeIndex', key.path)
			var data = []
			for (var i = 0; i < key.children.length; i++) {
				data.push(key.children[i].path)
				this.defaultActive = key.children[0].children[0].path
			}
			//默认打开的导航栏index
			this.openeds = data
			//赋值给data左侧导航栏数据
			this.data = key
		},

		//下拉菜单触发事件
		handleCommand(command) {
			//退出
			if (command === 'logout') {
				this.logout()
				this.$message.success('退出成功')
			} else if (command === 'userCenter') {
				this.$router.push('/userCenter')
			} else if (command === 'copyrightInfo') {
				//打开对话框
				this.dialogVisible = true
			}
		},

		//退出登录
		async logout() {
			const { data: res } = await this.$http.get('api/global/logout', {
				params: { access_token: this.userInfo.accessToken }
			})

			//
			if (res.code !== 200) return this.$message.error(res.msg)
			//清除token
			window.sessionStorage.clear()
			localStorage.clear()
			//跳转登录页面
			this.$router.push('/login')
			this.$message.success('退出成功！')
		}
	}
}
</script>

<style lang="less" scoped>
//  @import "../assets/css/theme-chalk.css";
//  @import "../assets/css/login_style.css";

.mainBox{
	margin: auto;
}
.asieHeight {
	height: 590px;
	background: #545454;
}
.navbar {
	background: #6aa227;
	height: 60px;
}
.el-header {
	padding: 0 0px !important;
}
.notice {
	float: left;
	margin: 6px 15px;
}
.notice img {
	height: 21px;
}
.el-divider {
	height: 22px;
	margin: 0 10px;
}
.el-footer {
	height: 30px;
	position: unset !important;
	padding: 0px !important;
}
.main-footer {
	text-align: center;
}
</style>
